<template>
  <div class="app-container">
    <!--    <el-row style="background-color: #161522;margin: 0"><h3 style="color: #ffffff">》》》》》<span
          style="color: rgb(29,108,196); font-size: larger">定位管理</span>《《《《《</h3></el-row>-->
    <el-row :gutter="20" style="height: 100% !important;">
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="16">

            <el-cascader
              size="medium"
              v-model="optionsValue"
              :key="refreshItem"
              :props="defaultParams"
              :options="options"
              @change="handleChange"
              width="300px"
              clearable
            >
            </el-cascader>
          </el-col>
          <el-col :span="8">
<!--            <el-button type="primary" style="margin-top: 5px" @click="chongzhi" size="mini" round
                       icon="el-icon-refresh"
            >重置
            </el-button>-->
            <el-button type="primary" style="margin-top: 5px" size="mini" round>牛总数：{{ total }}头
            </el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="cowEssenList">
          <!--          <el-table-column type="selection" width="55" align="center" />-->
          <el-table-column label="耳标编号" align="center" prop="earNumber"/>
          <el-table-column label="养殖户" align="center" prop="nickName"/>
          <!--      <el-table-column label="牛信息_主键ID" align="center" prop="cowEssenId" />-->
          <el-table-column label="地区" align="center" prop="deptName"/>
          <el-table-column label="体温" align="center" prop="temp">
            <template slot-scope="scope">
              <el-tag effect="dark" size="small"
                      :type="scope.row.temp< 20?'danger': scope.row.temp <=38 && scope.row.temp>=23 ?'primary':'danger'"
              >
                {{ scope.row.temp }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="计步数据" align="center" prop="jbu"/>

          <el-table-column label="拆卸状态" align="center" prop="fcai">
            <template slot-scope="scope">
              <el-tag :type="scope.row.fcai==0?'danger':'primary'">
                {{ scope.row.fcai == 0 ? '已拆卸' : '未拆卸' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="电池电量" align="center" prop="power">
            <template slot-scope="scope">
              <el-tag effect="dark" size="medium"
                      :type="scope.row.power >=70?'primary': scope.row.power >= 30 &&scope.row.power<70?'warning':'danger'"
              >
                {{ scope.row.power }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="牛类型" align="center" prop="cowType">
            <template slot-scope="scope">
              <span>{{
                  scope.row.cowType == 1 ? '散养牛' : scope.row.cowType == 2 ? '散养牛' : scope.row.cowType == 3 ? '散养牛' : '散养牛'
                }}</span>
            </template>
          </el-table-column>


          <!--          <el-table-column label="设备mac" align="center" prop="mac" width="180"/>
                    <el-table-column label="中继器mac" align="center" prop="devwifistamac" width="180"/>
                    <el-table-column label="位置" align="center" prop="shedAddress" min-width="200"/>-->
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                      <template slot-scope="scope">
                        <el-button
                          size="small "
                          type="primary"
                          @click="handle(scope.row)"
                        >查看定位
                        </el-button>
                      </template>
                    </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
      </el-col>
      <el-col :span="8" style="height: 800px;">
        <el-amap vid="amapContainer" v-loading="loading" :events="events" class="amap-demo">

        </el-amap>
      </el-col>
    </el-row>
  </div>
</template>
<!--`<div class="my"><img src="/static/img/niutou.png"><div>编号:'{{obj[0].tagNumber}}'<br/>位置:xxx<br/>计步:xxx<br/>体温:xxx<br/>耳标状态:xxx</div></div>`,-->
<script>
import { AmapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
import { treeselect } from '@/api/system/dept'
import { listCowEssen } from '@/api/dgw/cowEssen'

export default {
  name: 'BreedAquatics',
  props: ['showObj'],
  data() {
    return {
      /*多级联动*/
      optionsValue: [],
      options: [],
      defaultParams: {
        value: 'id',
        label: 'label',
        children: 'children'
      },
      /*表格数据*/
      cowEssenList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        devwifistamac: null,
        earNumber: null,
        createTime: null,
        deptId: null
      },
      // 总条数
      total: 0,
      loading: true,
      refreshItem:0,

      titles: '定位管理',
      testValus: null,

      marker: null,
      value: '',
      tableData: [],
      currentPage: 1,
      pagesize: 10,
      map: null,
      //地图
      center: null,
      events: {}
    }

  },

  /*挂在完毕后执行*/
  mounted() {
    this.initMap()
    this.treeDept()
    this.getData()

  },
  methods: {
    /*树形结构*/
    async treeDept() {
      await treeselect().then(response => {
        let data = response.data[0].children
        this.options = data
        console.log('dept数据', response.data)
      })
    },
    /*多级联动点击*/
    handleChange(value) {
      let le = value.length - 1
      this.queryParams.deptId = value[le]
      this.getData()
    },

     getData() {
      this.loading = true
      listCowEssen(this.queryParams).then(response => {

        this.cowEssenList = response.rows
        this.total = response.total
        var le = this.cowEssenList.length - 1
        var data = response.rows[le] //获取最后一条数据
        console.log('最后一条参数', data)

        this.initMap([data], this.cowEssenList)
        this.loading = false
      })

    },
    initMap(dis, ...obj) {
      console.log('传过来的参数', dis)
      console.log('传过来的集合', obj)
      this.loading = true
      lazyAMapApiLoaderInstance.load().then(() => {
        if (dis != null) {
          var diss = [dis[0].shedLongitude, dis[0].shedLatitude]
        }

        var map = new AMap.Map('amapContainer', {
          resizeEnable: true,
          center: diss,
          zoom: 12
        })

        var objLength = obj[0]
        var obj1 = objLength?.length
        if (obj1 != null) {
          for (var i = 0; i < obj1; i++) {
            let fcai = obj[0][i].fcai === 0 ? '拆卸' : '未拆卸'
            let fcai1 = dis[0].fcai === 0 ? '拆卸' : '未拆卸'
            var infoWindow = new AMap.InfoWindow({
              anchor: 'bottom-left',
              offset: new AMap.Pixel(5, 20)
            })
            var ll = [obj[0][i].shedLongitude, obj[0][i].shedLatitude]
            var marker = new AMap.Marker({
              map: map,
              position: ll,
              offset: new AMap.Pixel(-13, 30)
            })
            marker.content = ' <div class="my">\n' +
              '    <img src="/static/img/niutou.png" />\n' +
              '    <div>&nbsp;&nbsp;编号:' + obj[0][i].earNumber + '<br/>&nbsp;&nbsp;位置:' + obj[0][i].shedAddress.split('市')[1] + '<br/>&nbsp;&nbsp;运动量:' + obj[0][i].jbu + '<br/>&nbsp;&nbsp;体温:' + obj[0][i].temp + '<br/>&nbsp;&nbsp;耳标状态:' + fcai + '</div>\n' +
              '</div>'
            marker.content1 = ' <div class="my">\n' +
              '    <img src="/static/img/niutou.png" />\n' +
              '    <div>&nbsp;&nbsp;编号:' + dis[0].earNumber + '<br/>&nbsp;&nbsp;位置:' + dis[0].shedAddress.split('市')[1] + '<br/>&nbsp;&nbsp;运动量:' + dis[0].jbu + '<br/>&nbsp;&nbsp;体温:' + dis[0].temp + '<br/>&nbsp;&nbsp;耳标状态:' + fcai1 + '</div>\n' +
              '</div>'
            marker.on('click', markerClick)
            marker.emit('click', { target: marker })
            infoWindow.open(map, diss)
            infoWindow.setContent(marker.content1)
            marker.setMap(map)
          }
        }

        function markerClick(e) {
          infoWindow.setContent(e.target.content)
          infoWindow.open(map, e.target.getPosition())
        }

      })
        this.loading=false
    },

    handle: function(row) {
      console.log('===========================++++++++++++++++++++++++=========')
      /* let result = Math.floor(Math.random() * 4);
       let arr = this.randomArr[result];*/
      console.log('输出点击row:', row)
      if (row.shedLongitude !== null && row.shedLatitude !== null) {
        this.initMap([row], this.cowEssenList)
      } else {
        this.$message.error('该位置没有经纬,获取不到地址信息')
      }

      // this.initMap([row.longitude, row.latitude]);
    }
    ,

    handleSizeChange: function(val) {
      this.pagesize = val
    }
    ,
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    }
    ,
    tableRowClassName({ row, rowIndex }) {
      console.log('輸出row:{}', row)
      /*if (row.tagNumber.indexOf('NX') !== -1) {
        return 'warning-rows';
      } else if (row.tagNumber.indexOf('GS005') !== -1) {
        return 'warning-rowss';

      } else*/
      if ((rowIndex + 0) % 2 == 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }

    }
    ,
    getRowClass({ rowIndex }) {
      if (rowIndex == 0) {
        return 'background: #49494a; color: #87868c'
      } else {
        return ''
      }

    }

  }
}
</script>
<style>
.my {
  width: 420px;
  display: flex;
  /*
   // border: 1px solid black;
  */
  background-color: rgb(255, 255, 255);
  align-items: center;
  font-size: 13px;


  /*
  justify-content: space-between;
*/
}

.el-table .warning-rowss {
  background: #df5000;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .warning-rows {
  background: #a90d34 !important;
}

.el-table .success-row {
  background: #afafaf;
}

</style>
<style lang="less" scoped>
.info-window-content {
  position: relative;
  width: 220px;


  .button-close {
    position: absolute;
    right: 0.5em;
    top: 0.5em;

    cursor: pointer;
  }
}

.table {
  width: 900px;
  height: 400px;
  margin: 100px auto;
}


/deep/ .el-input__inner {
  background: transparent;
}


.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
